<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">

        <!-- title -->
        <div class="normal-box-hd clearfix">
            <div class="normal-box-title">
            <div class="decorate-square"></div>
            <h2>站点管理员</h2>
            </div>
        </div>

        <!-- 搜索 -->
        <div class="normal-box-bd">
            <div class="clearfix mb-20">
                <Button custom-icon="iconfont icon-fangkuai2" type="primary" size="small" style="float:right"  @click="show_create">添加管理员</Button>
                <Input class="mr-10" v-model="queryData.telPhone" placeholder="账号" style="width: 200px"/>
                <Input class="mr-10" v-model="queryData.name" placeholder="姓名" style="width: 200px"/>
                <Button type="primary" custom-icon="iconfont icon-chaxun"  size="small" @click="getList">查找</Button>
            </div>
        </div>

        <div>
            <i-table stripe highlight-row border :content="self" :columns="Tcolumns" :data="adminList"></i-table>
        </div>
        <div class="page">
          <Page :total="queryData.totalRecord" :page-size="queryData.limit" :current="queryData.page" show-total show-elevator @on-change="changepage"></Page>
        </div>

        <!--新建/修改用户-->
        <Modal v-model="newAdmin.show_modal" :title="newAdmin.modal_title" :loading="newAdmin.loading"
          @on-ok="sendPost">
          <Form ref="check" :model="newAdmin.data"
            :label-width="82">
            <FormItem label="姓名" prop="name" :rules="newAdmin.rules.name">
              <Input placeholder="请输入" v-model="newAdmin.data.name" style="width:300px;"/>
            </FormItem>
            <FormItem label="账号" prop="telPhone" :rules="newAdmin.rules.telPhone">
              <Input placeholder="请输入" v-model="newAdmin.data.telPhone" style="width:300px;"/>
            </FormItem>
            <FormItem label="密码" prop="password" :rules="newAdmin.rules.password">
              <Input placeholder="请输入" v-model="newAdmin.data.password" style="width:300px;"/>
            </FormItem>
            <FormItem label="账号状态" prop="status" :rules="newAdmin.rules.status">
                <RadioGroup v-model="newAdmin.data.status">
                    <Radio :label="true">正常</Radio>
                    <Radio :label="false">冻结</Radio>
                </RadioGroup>
            </FormItem>
          </Form>
        </Modal>

        <!-- 商品库存弹窗 -->
        <Modal width="60vw" v-model="logShow" footer-hide title="商品库存">
          <div>
            <i-table stripe highlight-row border :content="self" :columns="logCol" :data="logList"></i-table>
        </div>
        <div class="page">
          <Page :total="queryLog.totalRecord" :page-size="queryLog.limit" :current="queryLog.page" show-total show-elevator @on-change="logCpage"></Page>
        </div>
      </Modal>

    </div>
  </div>
</template>

<script>
import $api from '@/api/base_sys/gcDispenser.js'
import moment from 'moment'
import { Message } from 'iview'
import sele from '@/view/test/city.vue'
export default {
  components: {
    sele
  },
  data () {
    return {
      adminList: [],
      url: '/api/mallAdmin/',
      keyWords: '', // 搜索关键字
      index: '', // 当前编号
      // 新增管理员
      newAdmin: {
        show_modal: false,
        is_create: true,
        loading: true,
        modal_title: '添加管理员',
        rules: { // check
          name: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
          telPhone: [{ required: true, message: '请填写账号', trigger: 'blur' }],
          password: [{ required: true, message: '请填写密码', trigger: 'blur' }]
          // status:   [{required: true, message: "请选择账号状态", trigger: "blur"}],
        },
        data: {
          name: '',
          telPhone: '',
          password: '',
          status: true
        }
      },

      // 获取数据配置
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        name: '',
        telPhone: ''
      },

      // 商品库存查询参数
      queryLog: {
        limit: 10,
        page: 1,
        totalRecord: '',
        adminId: ''
      },
      logShow: false, // 商品库存是否显示
      logList: [], // 商品库存列表
      logCol: [
        { align: 'center', title: '编号', key: 'id', width: 80 },
        { align: 'center', title: '商品名称', key: 'productName', minwidth: 500 },
        { title: '商品主图',
          width: 100,
          render: (h, params) => {
            return h('img', {
              attrs: { src: params.row.picUrl },
              style: { width: '100%', height: '100%' }
            })
          }
        },
        { align: 'center', title: '商品价格', key: 'price', minwidth: 150 },
        { align: 'center', title: '库存数量', key: 'warehouse', minwidth: 120 }
      ],

      // 表格配置
      self: this,
      Tcolumns: [
        { align: 'center', title: '编号', key: 'id', width: 80 },
        { align: 'center', title: '姓名', key: 'name', minWidth: 100 },
        { align: 'center', title: '账号', minWidth: 100, key: 'telPhone' },
        { align: 'center', title: '密码', minWidth: 100, key: 'password' },
        { // 账号状态
          align: 'center',
          title: '账号状态',
          width: 100,
          render: (create, params) => {
            let s = params.row.status
            let color, text
            if (!s) {
              color = '#fbb217'
              text = '冻结'
            } else {
              color = '#02d792'
              text = '正常'
            }
            return create('div', {
              style: {
                background: color,
                color: '#fff',
                borderRadius: '20px'
              }
            }, text)
          }
        },
        { align: 'center', title: '创建时间', key: 'createTime', width: 160 },
        { align: 'center', title: '更新时间', key: 'updateTime', width: 160 },

        { // 操作
          title: '操作',
          key: 'action',
          width: 290,
          align: 'center',
          render: (create, params) => {
            // 创建父节点
            return create('div', [
              // 修改按钮
              create('i-button', {
                props: { type: 'info', size: 'small' },
                style: { margin: '0 3px' },
                on: { click: () => { this.showLog(params.row.id) } }
              }, '库存查询'),
              // 修改按钮
              create('i-button', {
                props: { type: 'primary', size: 'small' },
                style: { margin: '0 3px' },
                on: { click: () => { this.show_update(params.row.id) } }
              }, '修改'),

              // 删除按钮
              create('i-button', {
                props: { type: 'error', size: 'small' },
                style: { margin: '0 3px' },
                on: { click: () => { this.remove(params.row) } }
              }, '删除')

            ])
          }
        }

      ]

    }
  },
  async created () {
    this.getList()
  },
  methods: {
    showLog (id) {
      this.logShow = true
      this.queryLog.adminId = id
      this.getLog()
    },
    // 获取商品库存
    async getLog () {
      let data = (await $api.getData('/api/mallAdminProduct/page', this.queryLog)).data
      console.log('库存：', data)
      this.queryLog.totalRecord = data.totalRecord
      this.logList = data.list
    },
    // 商品库存分页
    logCpage (index) {
      this.queryLog.page = index
      this.getLog()
    },

    // 获取管理员列表
    async getList () {
      let data = (await $api.getData(this.url + 'page', this.queryData)).data
      console.log('列表：', data)
      this.queryData.totalRecord = data.totalRecord
      this.adminList = data.list
    },

    // 分页切换
    changepage (index) {
      this.queryData.page = index
      this.getList()
    },

    // 新建用户模态框
    show_create () {
      this.newAdmin.rules.mobilephone = [
        { required: true, min: 11, max: 11, message: '请填写正确的手机号', trigger: 'blur' },
        { type: 'number',
          trigger: 'blur',
          message: '手机号码格式错误',
          transform (value) { return Number(value) } }]
      let qwq = this.newAdmin
      this.$refs['check'].resetFields() // 清空内容
      qwq.is_create = true
      qwq.modal_title = '添加用户'
      qwq.show_modal = true // 模态框显示
    },

    // 修改用户模态框
    async show_update (index) {
      this.index = index
      this.newAdmin.rules.mobilephone = []
      this.$refs['check'].resetFields()
      let qwq = this.newAdmin
      qwq.rules.id = []
      qwq.is_create = false
      qwq.modal_title = '修改管理员'
      this.queryData.userId = index
      //   console.log(123,this.url+index);
      let data = (await $api.getData(this.url + index)).data
      this.clearQuery()
      console.log('本条数据：', data)

      // 数据填充
      let userData = this.newAdmin.data
      userData.id = data.id
      userData.name = data.name
      userData.telPhone = data.telPhone
      userData.password = data.password
      //   userData.status = String(Number(data.status))
      userData.status = data.status
      qwq.show_modal = true // 模态框显示
    },

    // 查询清空
    clearQuery () {
      this.queryData.name = ''
      this.queryData.telPhone = ''
    },

    // 用户数据提交
    sendPost () {
      this.$refs['check'].validate(async valid => {
        if (!valid) {
          this.changeLoading()
          console.log('no')
          return
        }
        if (valid) {
          // this.newAdmin.data.status = Boolean(Number(this.newAdmin.data.status))
          if (this.newAdmin.is_create) {
            let r = await $api.add(this.url, this.newAdmin.data)
            let message = r.message
            console.log(123, r)
            if (r.data) {
              this.$Message.success('操作成功')
              this.getList()
              this.newAdmin.show_modal = false
              return
            }
            this.$Message.error(message)
          } else {
            let r = await $api.update(this.url + this.index, this.newAdmin.data)
            let message = r.message
            console.log(456, r)
            if (r.data) {
              this.$Message.success('操作成功')
              this.getList()
              this.newAdmin.show_modal = false
              return
            }
            this.$Message.error(message)
          }
        }
      })
    },
    // 改变load状态
    changeLoading () {
      this.newAdmin.loading = false
      this.$nextTick(() => {
        this.newAdmin.loading = true
      })
    },

    // 删除
    remove (index) {
      const _id = String(index.id)
      const _name = index.name
      this.$Modal.confirm({
        title: '删除确认',
        content:
          '<p>你确认要删除管理员姓名为 <strong>' + _name +
          '</strong> 的记录吗？</p>',
        loading: true,
        onOk: async () => {
          let data = (await $api.del(this.url + _id))
          let result = data.data
          let message = data.message
          if (result) {
            this.$Message.success('操作成功')
            this.getList()
            this.$Modal.remove()
            return
          }
          this.$Message.error(message)
          this.$Modal.remove()
        }
      })
    }

  }

}
</script>

<style>
    td[class="y ivu-table-column-center"] {background: #02D792 !important; color: #fff;}
    td[class="n ivu-table-column-center"] {background: #f00 !important; color: #fff;}
    .page {padding: 1em .5em;}
</style>
